<template>
	<view :class="['page', { iphoneX: isIphoneX }]">
		<template v-if="token && isLogin">
			<template v-if="loadingState.default">
				<loading :loadingState="loadingState"></loading>
			</template>
			<template v-else>
				<view class="body">
					<view class="change-btn">
						<view class="select-data">设备名称：{{ dev_name }}</view>
					</view>
					<!-- 详情状态 -->
					<!-- <template v-if="!isSetting">
						<view class="detail-wrap m-t2">
							<view class="detail-item">
								<view class="label">灯管开关</view>
								<view class="detail-switch">
									<switch color="#3399FF" :checked="params.light_is_work == 1 ? true : false" disabled></switch>
									<view class="state">{{ params.light_is_work == 1 ? '开' : '关' }}</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">拍照间隔</view>
								<view class="detail-input">
									<view class="content">
										<view class="val t-r">{{ params.camera_interval }}min</view>
									</view>
									<view class="icon">
										<view class="iconfont f-s26">&#xe653;</view>
									</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">工作模式</view>
								<view class="detail-input">
									<view class="content">
										<view class="val t-r">{{ params.work_status_name }}</view>
									</view>
									<view class="icon">
										<view class="iconfont f-s26">&#xe653;</view>
									</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">工作时长</view>
								<view class="detail-input">
									<view class="content">
										<view class="val t-r">{{ params.everyday_work_date || '--' }}</view>
									</view>
									<view class="icon">
										<view class="iconfont f-s26">&#xe653;</view>
									</view>
								</view>
							</view>
							<template v-if="seting_type!=0">
								<view class="detail-item">
									<view class="label">清虫按钮</view>
									<view class="detail-switch">
										<switch color="#3399FF" :checked="params.clean_insect" disabled></switch>
										<view class="state">{{ params.clean_insect ? '开' : '关' }}</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">相机电源</view>
									<view class="detail-switch">
										<switch color="#3399FF" :checked="params.camera_power" disabled></switch>
										<view class="state">{{ params.camera_power? '开' : '关' }}</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">触发拍照</view>
									<view class="detail-switch">
										<switch color="#3399FF" :checked="params.is_camera" disabled></switch>
										<view class="state">{{ params.is_camera? '开' : '关' }}</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">启动清洗</view>
									<view class="detail-switch">
										<switch color="#3399FF" :checked="params.qingxi" disabled></switch>
										<view class="state">{{ params.qingxi ? '开' : '关' }}</view>
									</view>
								</view>
								<view class="detail-item" v-if="params.qingxi">
									<view class="label">清洗间隔</view>
									<view class="detail-input">
										<view class="content">
											<view class="val t-r">{{ params.qx_interval }}小时</view>
										</view>
										<view class="icon">
											<view class="iconfont f-s26">&#xe653;</view>
										</view>
									</view>
								</view>
							</template>
							<template v-if="seting_type==2">
								<view class="detail-item">
									<view class="label" style="width: auto;min-width: 20%;">路由重启时间</view>
									<view class="detail-input">
										<view class="content">
											<view class="val t-r">{{ params.routing_restart_time || '--' }}</view>
										</view>
										<view class="icon">
											<view class="iconfont f-s26">&#xe653;</view>
										</view>
									</view>
								</view>
							</template>

						</view>
					</template> -->

					<!-- 设置状态 -->
					<template>
						<view class="form-wrap m-t2">
							<view class="form-item">
								<view class="label">灯管开关</view>
								<view class="detail-switch">
									<switch color="#3399FF" :checked="params.light_is_work" disabled @click="saveSetting('light_is_work')"></switch>
									<view class="state">{{ params.light_is_work? '开' : '关' }}</view>
								</view>
							</view>
							<view class="form-item">
								<view class="label">拍照间隔</view>
								<picker class="form-picker" mode="selector" :range="camera_interval_data" @change="saveSetting('camera_interval',$event.detail.value)">
									<view class="picker">
										<view class="select-data t-l">{{ params.camera_interval }}min</view>
										<view class="icon">
											<view class="iconfont f-s26">&#xe653;</view>
										</view>
									</view>
								</picker>
							</view>
							<view class="form-item">
								<view class="label">工作模式</view>
								<picker class="form-picker" mode="selector" :range="detail.work_status" range-key="name" @change="saveSetting('work_status',$event.detail.value)">
									<view class="picker">
										<view class="select-data t-l">{{ params.work_status_name }}</view>
										<view class="icon">
											<view class="iconfont f-s26">&#xe653;</view>
										</view>
									</view>
								</picker>
							</view>
							<view class="form-item">
								<view class="label">工作时长</view>
								<view class="form-input">
									<view class="content">
										<view v-if="params.work_status == 1" class="val work-time">
											<view class="start">
												<view class="disabled">{{ params.everyday_work_date_start }}</view>
											</view>
											<view class="line">-</view>
											<view class="over">
												<view class="disabled">{{ params.everyday_work_date_over }}</view>
											</view>
										</view>
										<view v-else class="val work-time">
											<view class="start">
												<picker mode="time" @change="changeTime($event, 1)">
													<view>{{ params.everyday_work_date_start }}</view>
												</picker>
											</view>
											<view class="line">-</view>
											<view class="over">
												<picker mode="time" @change="changeTime($event, 2)">
													<view>{{ params.everyday_work_date_over }}</view>
												</picker>
											</view>
										</view>
									</view>
								</view>
							</view>

							<template v-if="seting_type!=0">
								<view class="form-item">
									<view class="label">清虫按钮</view>
									<view class="detail-switch">
										<switch color="#3399FF" :checked="params.clean_insect" disabled @click="saveSetting('clean_insect')"></switch>
										<view class="state">{{ params.clean_insect? '开' : '关' }}</view>
									</view>
								</view>
								<view class="form-item">
									<view class="label">相机电源</view>
									<view class="detail-switch">
										<switch color="#3399FF" :checked="params.camera_power" disabled @click="saveSetting('camera_power')"></switch>
										<view class="state">{{ params.camera_power? '开' : '关' }}</view>
									</view>
								</view>
								<!-- <view class="form-item">
									<view class="label">触发拍照</view>
									<view class="detail-switch">
										<switch color="#3399FF" :checked="params.is_camera" disabled @click="saveSetting('is_camera')"></switch>
										<view class="state">{{ params.is_camera ? '开' : '关' }}</view>
									</view>
								</view> -->
								<!-- 	<view class="form-item">
									<view class="label">启动清洗</view>
									<view class="detail-switch">
										<switch color="#3399FF" :checked="params.qingxi" disabled @click="saveSetting('qingxi')"></switch>
										<view class="state">{{ params.qingxi? '开' : '关' }}</view>
									</view>
								</view> -->
								<view class="form-item" v-if="params.qingxi">
									<view class="label">清洗间隔</view>
									<view class="detail-switch">
										<!-- <view class="content"> -->
										<!-- <view class="val" style="font-size: 30rpx;"> -->
										<input v-model.number="params.qx_interval" @blur="saveSetting('qx_interval')" class="uni-input" type="number" placeholder="请输入清洗间隔" style="font-size: 30rpx;height: 32px;text-align: end;padding-right: 10px;" />
										<view class="state">
											小时
										</view>
										<!-- </view> -->
										<!-- </view> -->
									</view>
								</view>

							</template>
							<template v-if="seting_type==2">
								<view class="form-item">
									<view class="label" style="min-width: 20%;width: auto;margin-right: 20px;">路由重启时间</view>
									<view class="form-input">
										<view class="content">
											<view class="val work-time">
												<view class="start">
													<picker mode="time" @change="changeTime($event, 3)">
														<view>{{ params.routing_restart_time}}</view>
													</picker>
												</view>
											</view>
										</view>
									</view>
								</view>
							</template>

						</view>
					</template>
				</view>
				<view class="footer" v-if="seting_type!=0">
					<view class="fix-wrap bottom">
						<!-- <view v-if="!isSetting" class="submit-btn" @click="showSetting">设置</view> -->
						<!-- <view v-else class="submit-btn" @click="saveSetting">保存设置</view> -->
						<view class="submit-btn" @click="saveSetting('is_camera')">触发拍照</view>
						<view class="submit-btn" @click="saveSetting('qingxi')">启动清洗</view>
					</view>
				</view>
			</template>
		</template>
	</view>
</template>

<script>
	import formdemo from '@/components/form.vue';
	import loading from '@/components/loading-more.vue';
	export default {
		name: 'name',
		data() {
			return {
				dev_num: '',
				dev_name: '',
				seting_type: '',
				isLogin: false,
				isIphoneX: getApp().globalData.isIphoneX,
				appid: getApp().globalData.appid,
				token: uni.getStorageSync('token'),
				userInfo: uni.getStorageSync('userInfo'),
				loginStateUpdate: false,
				loadingState: {
					default: true
				},
				// isSetting: false,
				detail: {},
				params: {
					light_is_work: '',
					work_status: '',
					work_status_name: '',
					camera_interval: '',
					everyday_work_date: '',
					everyday_work_date_start: '',
					everyday_work_date_over: '',

					// is_upload_image, 
					// is_upload_data,
					camera_power: false, //相机电源
					qingxi: false, //清洗电源
					is_camera: false, //相机触发
					qx_interval: '', //清洗间隔
					clean_insect: false, //是否开启清虫
					routing_restart_time: '00:00' //每天路由重启时间
				},
				camera_interval_data: [10, 20, 30, 40, 50, 60]
			};
		},
		async onLoad(params) {
			this.dev_num = params.dev_num;
			this.dev_name = params.dev_name;
			this.seting_type = params.seting_type;
			if (this.token) {
				this.isLogin = await this.$loginState('check');
				if (this.isLogin) {
					this.detail = await this.getDeviceSetDetail();
					this.setParams();
				} else {
					this.isLogin = await this.$loginState('reset');
				}
			}
		},
		async onShow() {
			if (this.loginStateUpdate) {
				this.token = uni.getStorageSync('token');
				this.userInfo = uni.getStorageSync('userInfo');
				this.isLogin = true;
				this.detail = await this.getDeviceSetDetail();
				this.setParams();
				this.loginStateUpdate = false;
			}

			if (!this.token && !this.isLogin) {
				this.isLogin = await this.$loginState('reset');
			}
		},
		methods: {
			changeSwitch(e, k) {
				console.log(e.detail.value, k);
				this.params[k] = e.detail.value
			},
			// 获取设备管理详情
			getDeviceSetDetail: async function() {
				let res = await this.$api.tool_api.getDeviceSetDetail({
					appid: this.appid,
					token: this.token,
					device_num: this.dev_num
				});
				if (res.data.ret == 1000) {
					this.loadingState.default = false;
					return res.data.data;
				}
			},

			// 获取设备管理参数
			setParams: function() {
				this.params.camera_interval = this.detail.list.camera_interval;
				this.params.light_is_work = this.detail.list.light_is_work == 1;
				this.params.everyday_work_date = this.detail.list.everyday_work_date;

				Object.assign(this.params, {
					camera_power: this.detail.list.camera_power == 1, //相机电源
					qingxi: this.detail.list.qingxi == 1, //清洗电源
					is_camera: this.detail.list.is_camera == 1, //相机触发
					qx_interval: this.detail.list.qx_interval || '', //清洗间隔
					clean_insect: this.detail.list.clean_insect == 1, //是否开启清虫
					routing_restart_time: this.detail.list.routing_restart_time //每天路由重启时间
				})

				if (this.detail.list.work_status == 1) {
					this.params.everyday_work_date = '00.00-00.00';
					this.params.everyday_work_date_start = '00.00';
					this.params.everyday_work_date_over = '00.00';
				} else {
					if (this.detail.list.everyday_work_date) {
						this.params.everyday_work_date_start = this.detail.list.everyday_work_date.split('-')[0];
						this.params.everyday_work_date_over = this.detail.list.everyday_work_date.split('-')[1];
					} else {
						this.params.everyday_work_date_start = '00.00';
						this.params.everyday_work_date_over = '00.00';
					}
				}
				this.detail.work_status.forEach(item => {
					if (item.id == this.detail.list.work_status) {
						this.params.work_status_name = item.name;
						this.params.work_status = item.id;
					}
				});
			},

			// 设置开始时间
			changeTime: function(e, type) {
				if (type == 3) {
					this.params.routing_restart_time = e.detail.value
					this.saveSetting('routing_restart_time')
				} else {
					if (type == 1) {
						this.params.everyday_work_date_start = e.detail.value;
					} else if (type == 2) {
						this.params.everyday_work_date_over = e.detail.value;
					}
					this.params.everyday_work_date = this.params.everyday_work_date_start + '-' + this.params.everyday_work_date_over;
					this.saveSetting('everyday_work_date')
				}
			},

			// // 打开设置
			// showSetting: function() {
			// 	this.isSetting = true;
			// },

			// 保存设置
			saveSetting: async function(k, v) {
				uni.showLoading({
					title: '保存中',
					mask: true
				});

				let params = {
					appid: this.appid,
					token: this.token,
					device_num: this.dev_num,
					user_id: this.userInfo.uid,
				}

				switch (k) {
					case 'work_status':
						Object.assign(params, { work_status: this.detail.work_status[v].id })
						break;
					case 'camera_interval':
						Object.assign(params, { camera_interval: this.camera_interval_data[v] })
						break;
					case 'everyday_work_date':
						Object.assign(params, { everyday_work_date: this.params.everyday_work_date })
						break;
					case 'light_is_work':
						Object.assign(params, { light_is_work: !this.params.light_is_work ? 1 : 2 })
						break;
					case 'camera_power':
						Object.assign(params, { camera_power: !this.params.camera_power ? 1 : 0 })
						break;
					case 'qingxi':
						// !this.params.qingxi ? 1 : 0 
						Object.assign(params, { qingxi: 1 })
						break;
					case 'is_camera':
						// { is_camera: !this.params.is_camera ? 1 : 0 })
						Object.assign(params, { is_camera: 1 })
						break;
					case 'qx_interval':
						Object.assign(params, { qx_interval: this.params.qingxi == 1 ? Number(this.params.qx_interval) : '' })
						break;
					case 'clean_insect':
						Object.assign(params, { clean_insect: !this.params.clean_insect ? 1 : 2 })
						break;
					case 'routing_restart_time':
						Object.assign(params, { routing_restart_time: this.params.routing_restart_time })
						break;
				}

				if (k == 'qx_interval' && this.params.qx_interval == this.detail.list.qx_interval) return uni.hideLoading()

				console.log('params', params, k, v);

				let res = await this.$api.tool_api.saveDeviceSet({
					...params
					// work_status: this.params.work_status,
					// camera_interval: this.params.camera_interval,
					// everyday_work_date: this.params.everyday_work_date,
					// // is_upload_image,
					// // is_upload_data,
					// light_is_work: this.params.light_is_work,
					// camera_power: this.params.camera_power ? 1 : 0,
					// qingxi: this.params.qingxi ? 1 : 0,
					// is_camera: this.params.is_camera ? 1 : 0,
					// qx_interval: this.params.qingxi == 1 ? this.params.qx_interval : '',
					// clean_insect: this.params.clean_insect ? 1 : 2,
					// routing_restart_time: this.params.routing_restart_time
				});
				if (res.data.ret == 1000) {
					this.detail = await this.getDeviceSetDetail();
					this.setParams();
					uni.hideLoading();
					this.$showToast({
						icon: 'success',
						title: '设置成功'
					})
				} else {
					uni.hideLoading();
					this.$showToast({
						icon: 'error',
						title: '设置失败'
					});
				}
			}
		},
		components: {
			loading
		},
		computed: {},
		watch: {}
	};
</script>

<style lang="less">
	.fix-wrap {
		padding: 5px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;

		.submit-btn {
			flex: 1;
			margin: 0 5px;
			border-radius: 5px;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.submit-btn:first-child {
			margin-right: 0;
		}


	}

	.submit-btn {
		// height: 100rpx;
		// line-height: 100rpx;
		text-align: center;
		background: #0085ff;
		color: #fff;
		font-size: 32rpx;
	}

	.work-time {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;

		.start,
		.over {
			flex-grow: 2;
			border: 0.1rpx solid #ddd;
			text-align: center;
		}

		.line {
			margin: 0 10rpx;
		}

		.disabled {
			background: #f5f5f5;
			color: #999;
		}
	}
</style>